﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设备信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/layui/vue.min.js"></script>
    <script src="~/layui/lib/index.js"></script>
    <script src="~/layui/polyfill.min.js"></script>
    <script src="~/layui/axios.js"></script>
    <style>
        .el-dialog__body {
            padding: 5px 10px;
        }

        .el-table td {
            padding: 0;
        }

        .el-table__row {
            height: 48px;
        }

        .el-table .spanClass {
            display: block;
            width: 100%;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="height:50px;width:100%;line-height:50px;position:fixed;top:0;z-index:5;">
            @*<el-button type="primary" icon="el-icon-plus" v-on:click="addDialog()">新增</el-button>*@
            <el-link type="primary" href="/ViewAuthorize/Index">首页</el-link>
        </div>
        <el-table :data="deviceList" style="width: 100%;margin-top:50px;" highlight-current-row>
            <el-table-column prop="serverIP" label="金茂服务IP" align="center"></el-table-column>
            <el-table-column prop="serverport" label="金茂服务端口" align="center"></el-table-column>
            <el-table-column prop="liftid" label="电梯号" align="center"></el-table-column>
            <el-table-column prop="protocoltype" label="协议类型" align="center"></el-table-column>
            <el-table-column prop="mainIP" label="服务IP" align="center"></el-table-column>
            <el-table-column prop="mainPort" label="端口号" align="center"></el-table-column>
            <el-table-column prop="ttrAMA1_receive" label="ttrAMA1是否开启" align="center" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.ttrAMA1_receive" active-text="是" v-bind:active-value="1" inactive-text="否" v-bind:inactive-value="0" v-on:change="changeState(scope.row)" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="ttrAMA2_receive" label="ttrAMA2是否开启" align="center" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.ttrAMA2_receive" active-text="是" v-bind:active-value="1" inactive-text="否" v-bind:inactive-value="0" v-on:change="changeState(scope.row)" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="ttrAMA3_receive" label="ttrAMA3接收是否开启" align="center" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.ttrAMA3_receive" active-text="是" v-bind:active-value="1" inactive-text="否" v-bind:inactive-value="0" v-on:change="changeState(scope.row)" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="ttrAMA3_send" label="ttrAMA3发送是否开启" align="center" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.ttrAMA3_send" active-text="是" v-bind:active-value="1" inactive-text="否" v-bind:inactive-value="0" v-on:change="changeState(scope.row)" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="enable" label="是否启用" align="center" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.enable" active-text="是" v-bind:active-value="1" inactive-text="否" v-bind:inactive-value="0" v-on:change="changeState(scope.row)" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="printlog" label="是否打印日志" align="center" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.printlog" active-text="是" v-bind:active-value="1" inactive-text="否" v-bind:inactive-value="0" v-on:change="changeState(scope.row)" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" v-on:click="editDialog(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="新增" :visible="addDialogVisible" width="50%" top="5vh" v-on:close="addCancel()">
            <el-form ref="addDeviceInfoRef" :model="addDeviceInfo" label-width="100px">
                <el-form-item label="金茂服务IP" prop="serverIP">
                    <el-input v-model="addDeviceInfo.serverIP"></el-input>
                </el-form-item>
                <el-form-item label="金茂服务端口" prop="serverport">
                    <el-input v-model.number="addDeviceInfo.serverport"></el-input>
                </el-form-item>
                <el-form-item label="电梯号" prop="liftid">
                    <el-input v-model.number="addDeviceInfo.liftid"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="enable">
                    <el-switch v-model="addDeviceInfo.enable" v-bind:active-value="1" v-bind:inactive-value="0" active-text="是" inactive-text="否">
                    </el-switch>
                </el-form-item>
                <el-form-item v-if="addDeviceInfo.enable === 1" label="协议类型" prop="protocoltype">
                    <el-select v-model="addDeviceInfo.protocoltype" style="width:100%;">
                        <el-option label="server" value="server"></el-option>
                        <el-option label="client" value="client"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="addDeviceInfo.enable === 1" label="服务IP" prop="mainIP">
                    <el-input v-model="addDeviceInfo.mainIP"></el-input>
                </el-form-item>
                <el-form-item v-if="addDeviceInfo.enable === 1" label="端口号" prop="mainPort">
                    <el-input v-model.number="addDeviceInfo.mainPort"></el-input>
                </el-form-item>
                <el-form-item style="text-align:right;">
                    <el-button type="primary" v-on:click="addDevice">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="编辑" :visible="editDialogVisible" width="50%" top="5vh" v-on:close="editCancel()">
            <el-form ref="editDeviceInfoRef" :model="editDeviceInfo" label-width="100px">
                <el-form-item label="金茂服务IP" prop="serverIP">
                    <el-input v-model="editDeviceInfo.serverIP"></el-input>
                </el-form-item>
                <el-form-item label="金茂服务端口" prop="serverport">
                    <el-input v-model.number="editDeviceInfo.serverport"></el-input>
                </el-form-item>
                <el-form-item label="电梯号" prop="liftid">
                    <el-input v-model.number="editDeviceInfo.liftid"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="enable">
                    <el-switch v-model="editDeviceInfo.enable" v-bind:active-value="1" v-bind:inactive-value="0" active-text="是" inactive-text="否">
                    </el-switch>
                </el-form-item>
                <el-form-item v-if="editDeviceInfo.enable === 1" label="协议类型" prop="protocoltype">
                    <el-select v-model="editDeviceInfo.protocoltype" style="width:100%;">
                        <el-option label="server" value="server"></el-option>
                        <el-option label="client" value="client"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="editDeviceInfo.enable === 1" label="服务IP" prop="mainIP">
                    <el-input v-model="editDeviceInfo.mainIP"></el-input>
                </el-form-item>
                <el-form-item v-if="editDeviceInfo.enable === 1" label="端口号" prop="mainPort">
                    <el-input v-model.number="editDeviceInfo.mainPort"></el-input>
                </el-form-item>
                <el-form-item style="text-align:right;">
                    <el-button type="primary" v-on:click="editDevice">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <script src="~/layui/jquery-3.3.1.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:function() {
                return {
                    deviceList: [],
                    addDialogVisible: false,
                    addDeviceInfo: {
                        serverIP: '',
                        serverport: '',
                        liftid: '',
                        enable: 0,
                        mainPort: 0,
                        mainIP: '',
                        protocoltype: ''
                    },
                    editDialogVisible: false,
                    editDeviceInfo: {}
                }
            },
            created:function() {
                this.query()
            },
            methods: {
                query: function () {
                    var _this = this;
                    axios({
                        method: 'post',
                        url: '/api/Device/QueryDevInfo',
                    }).then(function(res) {
                        _this.deviceList = []
                        if (res.data.errcode !== 0) return _this.$message.error(res.data.errmsg)
                        console.log(res)
                        _this.deviceList.push(res.data.data)
                    })
                },
                addDialog:function() {
                    this.addDialogVisible = true
                },
                addDevice:function() {
                    console.log(this.addDeviceInfo);
                    var _this = this;
                    this.$refs.addDeviceInfoRef.validate(function (valid) {
                        if (!valid) return false;
                        axios({
                            method: 'post',
                            url: '/api/Device/InsertDevInfo',
                            data: _this.addDeviceInfo
                        }).then(function(res) {
                            console.log(res)
                            if (res.data.errcode !== 0) return _this.$message.error(res.data.errmsg)
                            _this.$message.success('新增成功')
                            _this.addDialogVisible = false
                            _this.query()
                        })
                    })

                },
                addCancel:function() {
                    this.$refs.addDeviceInfoRef.resetFields()
                    this.addDialogVisible = false
                },
                // 编辑
                editDialog:function(row) {
                    this.editDeviceInfo = row;
                    this.editDialogVisible = true
                },
                editDevice: function () {
                    var _this = this;
                    this.$refs.editDeviceInfoRef.validate(function(valid) {
                        if (!valid) return false;
                        axios({
                            method: 'post',
                            url: '/api/Device/UpdateDevInfo',
                            data: _this.editDeviceInfo
                        }).then(function(res){
                            console.log(res)
                            if (res.data.errcode !== 0) return _this.$message.error(res.data.errmsg)
                            _this.$message.success('修改成功')
                            _this.editDialogVisible = false
                            _this.query()
                        })
                    })
                },
                editCancel:function() {
                    this.$refs.editDeviceInfoRef.resetFields()
                    this.editDialogVisible = false
                },
                // 修改状态
                changeState: function (row) {
                    var _this = this;
                    axios({
                        method: 'post',
                        url: '/api/Device/UpdateDevInfo',
                        data: row,
                    }).then(function(res){
                        if (res.data.errcode !== 0) return _this.$message.error(res.data.errmsg)
                        _this.$message.success("修改状态成功")
                    })
                }
            }
        })
    </script>

</body>
</html>